<template>
	<view>
		<view class="walletItem">
			<view>编辑信息</view>
			<input :placeholder="`请输${type==2?'支付宝帐':'微信'}号`" v-model="num" />
			<input placeholder="请输入该账号真实姓名" v-model="name"/>
			<view style="margin-top: 40upx;">{{type==2?'支付宝':'微信'}}收款码</view>
			<view class="addImg flex align-center flex-direction justify-center">
				<block v-if="!src">
					<image class="addLogo" src="/static/image/icon/add-to.png" @click="chooseImg"></image>
					<text @click="chooseImg">点击上传收款码</text>
				</block>
				<block v-else>
					<image mode="aspectFit" class="srcImg" @click="previewImg(src)" :src="src"></image>
					<image class="closeImg" @click="closeImg" src="/static/image/icon/dialog-close.png"></image>
				</block>
			</view>
		</view>
		<button class="buyBtn" @click="subBank">保存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: '',
				name: '',
				src: '',
				type: ''
			}
		},
		onLoad(op) {
			this.type = op.type
			this.getInfo()
			uni.setNavigationBarTitle({
				title:this.type==2?'支付宝':'微信'+'信息'
			})
		},
		methods: {
			getInfo() {
				this.$sloading()
				this.$request({
					url: this.$api.wallet.bank_info,
					method:'post',
					data: {
						type:this.type
					}
				}).then(info => {
					this.$hloading()
					if (info.code == 0) {
						this.name = info.data.account
						this.src = info.data.pay_img
						this.num = info.data.phone
						this.id = info.data.id || ''
					}
				}).catch(info => {
					this.$hloading()
				})
			},
			chooseImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (r) => {
						console.log(r)
						this.uploadImage(r.tempFilePaths[0])
					}
				});
			},
			uploadImage(img) {
				this.$sloading()
				var that = this
				uni.uploadFile({
				    url: that.$api.upload.file,
				    filePath: img,
				    name: 'file',
				    fileType: 'image',
				    formData: {
				        file: img,
				        file_name: '',
				    },
				    success(res) {
						that.$hloading()
				        const data = res.data;
				        let result = null;
				        if (typeof data === 'string') {
				            result = JSON.parse(data);
				        } else {
				            result = data;
				        }
				        if (result.code == 0) {
							that.src = result.data.url
				        } else {
				            uni.showModal({
				                title: '',
				                content: result.msg,
				                showCancel: false,
				            })
				        }
				    },
				    fail(e) {
						that.$hloading()
				        if (e && e.errMsg) {
				            uni.showModal({
				                title: '错误',
				                content: e.errMsg,
				                showCancel: false,
				            });
				        }
				    },
				});
				
			},
			closeImg() {
				this.src = ''
			},
			previewImg(src) {
				uni.previewImage({
					urls: [src]
				})
			},
			subBank() {
				if (!this.name) {
					this.$showM('请输入姓名', false)
					return
				}
				if (!this.num) {
					this.$showM('请输入帐号', false)
					return
				}
				if (!this.src) {
					this.$showM('请上传收款码', false)
					return
				}
				this.$sloading()
				this.$request({
					url: this.$api.wallet.edit_bank,
					method:'post',
					data: {
						type:this.type,
						account:this.name,
						pay_img:this.src,
						phone:this.num,
						id:this.id
					}
				}).then(info => {
					this.$hloading()
					if (info.code == 0) {
						this.$showM('保存成功', false, r => {
							uni.navigateBack()
						})
					}
				}).catch(info => {
					this.$hloading()
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.addImg {
		width: 300upx;
		height: 300upx;
		color: #aaa;
		margin: 20upx auto 0;
		border: 1px dashed #ccc;
		position: relative;
		font-size: 26upx;
	}

	.srcImg {
		max-width: 100%;
		max-height: 100%;
	}

	.closeImg {
		position: absolute;
		width: 50upx;
		height: 50upx;
		border-radius: 50%;
		top: 0;
		right: 0;
	}

	.addLogo {
		width: 70upx;
		height: 70upx;
		margin-bottom: 20upx;
	}

	.buyBtn {
		width: 660upx;
		height: 70upx;
		font-size: 30upx;
		line-height: 70upx;
		margin-top: 100upx;
		background-image: linear-gradient(to right,#ffd171,#ff8959);
		color: #fff;
	}

	.setDefault {
		margin-top: 30upx;
	}

	switch {
		transform: scale(0.7);

	}

	.walletItem input {
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		padding: 0 20upx;
		font-size: 28upx;
		border: 1px solid #ccc;
		margin-top: 30upx;
	}

	.walletItem {
		width: 700upx;
		padding: 20upx;
		border-radius: 10upx;
		box-shadow: 0 0 5px #ffd171;
		background: #fff;
		margin: 40upx auto 0;
	}

	.rightLogo {
		width: 50upx;
		height: 50upx;
	}
</style>
